<template>
<div class="wrapper">
  <swiper :options="swiperOptions" v-if="listswiper.length">
    <swiper-slide class="swiper-img" v-for="item in listswiper" :key="item.id">
      <img :src="item.imgurl" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
// import {Swiper} from '../../modeul/swiper'
export default {
  name: 'carrousel',
  props: {
    listswiper: Array
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
   .wrapper>>>.swiper-pagination-bullet-active{
       background: #fff;
     }
   .wrapper{
     overflow: hidden;
     width: 100%;
     height: 0;
     padding-bottom: 31%;

     .swiper-img{
       width: 100%;
       height: 120px;
       img{
         width: 100%;
         height: 100%;
       }
     }
   }
</style>
